<template>
	<view class="container">
		<view class="main">
			<view class="container-top">
				<!-- 用户信息 -->
				<view class="user-info">
					<view class="user-avatar-wrapper" @tap.stop.prevent="goSetting('page_user/setting/setting')"
						v-if="userInfo.authInfo">
						<view class="user-avatar">
							<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill">
							</image>
						</view>
						<view class="user-status" v-if="userInfo.shelfState == 1 && userInfo.settleState == 1">
							<text class="status">可接单</text>
						</view>
						<view class="user-status user-status-no"
							v-if="userInfo.shelfState == 0 && userInfo.settleState == 1">
							<text class="status">不可接单</text>
						</view>
					</view>
					<view v-else class="user-avatar-wrapper" @tap.stop.prevent="goLogin()">
						<view class="user-avatar">
							<image class="avatar"
								src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/avatar/2023/11/21/08c1a05853054a44ba0ea2c6aba565b9.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="nick-name" @tap.stop.prevent="goSetting('page_user/setting/setting')"
						v-if="userInfo.authInfo">
						<view class="name onelist-hidden">{{userInfo.authInfo.name}}</view>
						<view class="card-id">ID:{{userInfo.authInfo.userId}}</view>
					</view>
					<view class="nick-name" v-else @tap.stop.prevent="goLogin()">
						<view class="name onelist-hidden">注册/登录</view>
					</view>
					<view class="go-compile" v-if="userInfo.authInfo"
						@tap.stop.prevent="goSetting('page_user/setting/setting')"><text
							class="text-value">去编辑</text><text class="text-arrows"></text></view>
				</view>
				<!-- 钱包 -->
				<view class="wallet" @tap.stop.prevent="goSetting('page_account/wallet/wallet')">
					<view class="title">我的钱包</view>
					<button class="btn-primary btn-wallet">提现</button>
				</view>
			</view>
			<view class="container-function">
				<!-- 菜单1 -->
				<!-- v-if="!userInfo || userInfo.settleState != 1" -->
				<view class="section section-menu section-settleState" v-if="false">
					<template v-for="(item,index) in menuList">
						<view class="section-menu-item" v-if="item.jurisdiction" :key="item.id"
							@tap.stop.prevent="goMenuPage(item)">
							<view class="icon-image">
								<view v-if="index == 1 && item.jurisdiction && userInfo.pendingOrder > 0"
									class="pending-order">
									{{userInfo.pendingOrder < 99 ? userInfo.pendingOrder : '99+'}}
								</view>
								<image class="icon"
									:src="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/'+item.icon+'.png'">
								</image>
							</view>
							<view class="title">{{item.name}}</view>
						</view>
					</template>
				</view>
				<view v-else class="section section-menu is-section-settle" :class="{'section-menu-four':menuListShow}">
					<uv-scroll-list indicatorWidth="36rpx" indicatorBarWidth="24rpx" indicatorColor="#F6F8F7"
						indicatorActiveColor="#E3E9E5" :indicator="!menuListShow">
						<template v-for="(item,index) in menuList">
							<view class="section-menu-item" v-if="item.jurisdiction" :key="item.id"
								@tap.stop.prevent="goMenuPage(item)">
								<view class="icon-image">
									<view v-if="index == 1 && item.jurisdiction && userInfo.pendingOrder > 0"
										class="pending-order">
										{{userInfo.pendingOrder < 99 ? userInfo.pendingOrder : '99+'}}
									</view>
									<image class="icon"
										:src="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/'+item.icon+'.png'">
									</image>
								</view>
								<view class="title">{{item.name}}</view>
							</view>
						</template>
					</uv-scroll-list>
				</view>
				<!-- 菜单2 管理中心 -->
				<view class="section section-administration" v-if="userInfo.settleState == 1">
					<view class="title">管理中心</view>
					<view class="section-serve-list">
						<view class="section-serve-item" v-for="(item,index) in administrationList" :key="item.id"
							@tap.stop.prevent="goMenuPage(item)" :class="item.id">
							<!-- <image class="icon"
								:src="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/'+item.icon+'.png'"
								mode="heightFix"></image> -->
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
				<!-- 菜单3 其他服务 -->
				<view class="section section-serve">
					<view class="title">其他服务</view>
					<template v-for="(item,index) in serveList">
						<view class="section-serve-item" v-if="item.id != 'service'" :key="item.id"
							@tap.stop.prevent="goMenuPage(item)">
							<image class="icon"
								:src="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/'+item.icon+'.png'">
							</image>
							<view class="name">{{item.name}}</view>
							<view class="arrow dy-iconfont icon-qiehuanqiyou"></view>
						</view>
						<button class="section-serve-item" v-else open-type="contact">
							<image class="icon"
								:src="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/'+item.icon+'.png'">
							</image>
							<view class="name">{{item.name}}</view>
							<view class="arrow dy-iconfont icon-qiehuanqiyou"></view>
						</button>
					</template>
				</view>
			</view>
			<!-- 入驻接单 -->
			<view class="enter-order" v-if="userInfo.settleState != 1">
				<image class="enter-icon"
					src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/user_icon.png">
				</image>
				<view class="enter-message">
					<view class="f-28 col-0 f-w">入驻接单</view>
					<view class="f-22 col-9 f-n">快来入驻接单啦！</view>
				</view>
				<button class="btn-primary btn-enter"
					@tap.stop.prevent="goRegister('page_account/autonym/index')">去入驻</button>
				<!-- <button class="btn-primary btn-enter"
					@tap.stop.prevent="goLottery('#小程序://抽奖/NBL8TLijkhWjp2x')">去抽奖</button> -->
			</view>
		</view>
		<view class="guidance-pop" @touchmove.stop.prevent="clear" v-if="guidance.status">
			<view class="overlay" :class="{'overlay-none':guidance.step != 1}" @touchmove.stop.prevent="clear"></view>
			<view class="guidance-step-1" v-if="guidance.step == 1" @tap.stop.prevent="nextStep(guidance.step)">
				<image class="image-gui"
					src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/guidance-step-1.png"
					mode="widthFix"></image>
			</view>
			<view class="guidance-step-2" v-if="guidance.step == 2">
				<view class="remind" @tap.stop.prevent="nextStep(guidance.step)">我知道了</view>
				<view class="Guidance">及时设置可约及不可约日期，可有效避免漏单和用户误下单哦～</view>
			</view>
			<view class="guidance-step guidance-step-3" v-if="guidance.step == 3">
				<view class="remind" @tap.stop.prevent="nextStep(guidance.step)">我知道了</view>
				<view class="Guidance">如需调整服务价格和区域，请点击这里修改～</view>
			</view>
			<view class="guidance-step guidance-step-4" v-if="guidance.step == 4">
				<view class="remind" @tap.stop.prevent="nextStep(guidance.step)">我知道了</view>
				<view class="Guidance">如需休息无法接单，请及时更新状态，避免消息打扰！</view>
			</view>
			<view class="guidance-step guidance-step-5" v-if="guidance.step == 5">
				<view class="remind" @tap.stop.prevent="nextStep(guidance.step)">完成</view>
				<view class="Guidance">查看订单详情、评价和动态，可点击这块区域！</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<addition-MP></addition-MP>
		<!-- #endif -->
		<uv-toast ref="toast"></uv-toast>
		<survey-pop></survey-pop>
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar"></tabbar>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	const app = getApp();

	export default {
		mixins: [mp],
		components: {
			tabbar
		},
		data() {
			return {
				tabbarCurrent: 2, //当前索引
				tabBar: app.globalData.tabBar,
				userInfo: {},

				skeletonShow: true,

				menuListShow: true,
				// 菜单列表
				menuList: [{
						id: "order",
						name: "我的下单",
						icon: "order-mu",
						url: 'page_user/order/place',
						jurisdiction: true,
						needLogin: true,
					}, {
						id: "receiv",
						name: "我的接单",
						icon: "order-2",
						url: 'page_user/order/receiv',
						jurisdiction: false,
						needLogin: true,
					},
					{
						id: "homepage",
						name: "我的主页",
						icon: "homepage",
						url: '',
						jurisdiction: false,
						needLogin: true,
					},
					{
						id: "evaluate",
						name: "我的评价",
						icon: "evaluate",
						url: 'page_user/appraise/appraise',
						jurisdiction: true,
						needLogin: true,
					},
					{
						id: "giveLike",
						name: "我的点赞",
						icon: "giveLike",
						url: 'page_user/giveLike/giveLike',
						jurisdiction: true,
						needLogin: true,
					},
					{
						id: "dynamic",
						name: "我的动态",
						icon: "appraise",
						url: 'page_user/post/post',
						jurisdiction: false,
						needLogin: true,
					},
					{
						id: "discount",
						name: "优惠券",
						icon: "discount",
						url: 'page_user/discount/discount',
						jurisdiction: true,
						needLogin: true,
					}
				],
				// 服务列表
				administrationList: [{
					id: "auction",
					name: "档期管理",
					icon: "auction",
					url: 'page_user/auction/auction',
					jurisdiction: true,
					needLogin: true,
				}, {
					id: "service",
					name: "服务管理",
					icon: "service",
					jurisdiction: true,
					url: 'page_user/service/service',
					needLogin: true,
				}, {
					id: "order",
					name: "接单状态",
					icon: "order",
					url: 'page_user/state/state',
					jurisdiction: true,
					needLogin: false,
				}],

				// 服务列表
				serveList: [{
						id: "service",
						name: "联系客服",
						icon: "service",
						jurisdiction: true,
						needLogin: true,
					},
					{
						id: "accounts",
						name: "关注公众号",
						icon: "accounts",
						jurisdiction: true,
						url: 'https://mp.weixin.qq.com/s/T1lzAiBGKBP43Eq-7SQCOg',
						needLogin: false,
					},
					{
						id: "feedback",
						name: "反馈意见",
						icon: "feedback",
						jurisdiction: true,
						url: 'page_user/feedback/feedback',
						needLogin: true,
					},
					{
						id: "set",
						name: "我的设置",
						icon: "set",
						url: 'page_account/setting/setting',
						jurisdiction: true,
						needLogin: false,
					}
				],
				guidance: {
					status: false,
					top: 0,
					left: 0,
					step: 1,
				}
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {},
		onShow: function() {
			if (app.globalData.isLogin) {
				this.userDetails()
			}
			uni.hideTabBar()
			app.globalData.tabBar[0].name = 'active-home'
			setTimeout(() => {
				this.skeletonShow = false;
			}, 1000);
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(e) {},
		methods: {
			clear() {},
			goLogin() {
				app.doLogin()
				let that = this;
				// 获取临时登录凭证code。
			},
			userDetails() {
				app._post_form("/client/getById", null, (res) => {
					console.log(res.data);
					let user_info = uni.getStorageSync('user_info');
					user_info.realAuthState = res.data.realAuthState
					user_info.shelfState = res.data.shelfState
					user_info.settleState = res.data.settleState
					user_info.authInfo.name = res.data.nickName
					user_info.avatarUrl = res.data.avatar
					user_info.pendingOrder = res.data.pendingOrder
					user_info.wechatNumber = res.data.wechatNumber
					uni.setStorageSync('user_info', user_info);
					app.globalData.UserInfo = user_info
					this.userInfo = user_info
					this.menuList[1].jurisdiction = this.userInfo.settleState == 1
					this.menuList[5].jurisdiction = this.userInfo.settleState == 1
					this.menuList[2].jurisdiction = this.userInfo.settleState == 1
					this.menuList[2].url = 'page_sharing/accompany/details?id=' + res.data.id + ' &from=1'
					var arrMenuList = this.menuList.filter(function(x, index) {
						return x.jurisdiction;
					});
					this.menuListShow = arrMenuList.length < 5
					let guidance = uni.getStorageSync('user_guidance');
					this.guidance.status = this.userInfo.settleState == 1 && !guidance
					if (this.guidance.status) {
						// this.$refs.popup.open();
					}
				}, false, () => {})
			},
			/**
			 * 验证是否已登录
			 */
			onCheckLogin() {
				if (!app.globalData.isLogin) {
					app.doLogin();
					return false;
				}
				return true;
			},
			// 跳转菜单页面
			goMenuPage(menu) {
				if (menu.needLogin && !this.onCheckLogin()) {
					return false;
				}
				app.navigationTo(menu.url);
			},
			goLottery(shortLink) {
				wx.navigateToMiniProgram({
					shortLink: shortLink,
					//develop开发版；release体验版；release正式版
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转小程序成功！", res);
					}
				})
			},
			goRegister(url) {
				// app.navigationTo(url)
				if (!this.onCheckLogin()) {
					return false;
				}
				return new Promise((resolve, reject) => {
					app._get(
						"/client/peng-register/go-register", null,
						(result) => {
							let register = result.data
							uni.setStorageSync('register', register);
							if (register.settleState == 1) {
								this.$refs.toast.show({
									type: 'default',
									message: "您已是碰头人"
								})
								setTimeout(() => {
									this.$refs.toast.hide()
								}, 1000)
							} else if (register.settleState == 2) {
								this.$refs.toast.show({
									type: 'default',
									message: "入驻资料审核中"
								})
								setTimeout(() => {
									this.$refs.toast.hide()
								}, 1000)
							} else {
								app.navigationTo(url)
							}
						}, null, () => {
							resolve();
						}
					);
				});
			},
			nextStep(step) {
				if (step == 5) {
					uni.setStorageSync('user_guidance', true);
					this.guidance.status = false
				}
				this.guidance.step = step + 1
			},
			goSetting(url) {
				if (!this.onCheckLogin()) {
					return false;
				}
				app.navigationTo(url)
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #F6F8F7;
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 130rpx;
		z-index: 1;

		.main {
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.container-top {
			box-sizing: border-box;
			padding: 260rpx 24rpx 0;
		}

		&::after {
			position: absolute;
			display: block;
			left: 0;
			right: 0;
			top: 0;
			content: '';
			width: 100%;
			height: 450rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/user_bg.png');
			background-repeat: no-repeat;
			background-size: cover;
			z-index: -2;
		}

		.user-info {
			background: rgba(255, 255, 255, 0.74);
			border-radius: 20rpx;
			border: 2px solid #FFFFFF;
			backdrop-filter: blur(5rpx);
			display: flex;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			padding: 26rpx 34rpx;
			width: 100%;
			margin-bottom: 16rpx;
			height: 212rpx;

			.user-avatar-wrapper {
				position: relative;
				flex-shrink: 0;
				margin-right: 32rpx;

				.user-avatar {
					width: 160rpx;
					height: 160rpx;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-status {
					box-sizing: border-box;
					padding: 4rpx 12rpx;
					background: #FFFFFF;
					border-radius: 37rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: center;

					.status {
						font-size: 22rpx;
						font-weight: 400;
						color: #1E1F1F;
						line-height: 30rpx;
						display: inline-block;
						white-space: nowrap;

						&::before {
							display: inline-block;
							position: relative;
							top: 3rpx;
							content: '';
							width: 20rpx;
							height: 20rpx;
							background: #A7F517;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
				}

				.user-status-no {
					.status {
						&::before {
							background: #FF4664;
						}
					}
				}
			}

			.nick-name {
				width: 45%;

				.name {
					font-size: 38rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 53rpx;
				}

				.card-id {
					font-size: 26rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 29rpx;
					margin-top: 20rpx;
				}
			}

			.go-compile {
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding-left: 16rpx;
				position: absolute;
				right: 0;
				top: 0;
				width: 172rpx;
				height: 64rpx;
				background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/go-compile.png');
				background-repeat: no-repeat;
				background-size: cover;

				.text-value {
					font-size: 24rpx;
					font-weight: 900;
					color: #222222;
				}

				.text-arrows {
					width: 26rpx;
					height: 26rpx;
					background: rgba(255, 255, 255, 0.5);
					border: 2rpx solid #FFFFFF;
					backdrop-filter: blur(10rpx);
					border-radius: 50%;
					margin-left: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;


					&::before {
						font-family: "dy-iconfont";
						content: "\e600";
						font-size: 13rpx;
						line-height: 24rpx;
					}
				}
			}
		}

		.wallet {
			width: 100%;
			height: 118rpx;
			background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/wallet-bg.png');
			background-repeat: no-repeat;
			background-size: cover;
			box-sizing: border-box;
			padding: 30rpx 50rpx 30rpx 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 3;

			.title {
				font-size: 32rpx;
				font-weight: 900;
				color: #A7F517;
				line-height: 45rpx;
			}

			.btn-wallet {
				width: 144rpx;
				height: 58rpx;
				background: linear-gradient(144deg, #CCFA2F 0%, #ABF61A 55%, #A7F517 100%);
				border-radius: 29rpx;
				font-size: 28rpx;
				font-weight: 900;
				color: #2B2F2B;
				line-height: 58rpx;
			}
		}

		.container-function {
			box-sizing: border-box;
			padding: 24rpx 24rpx 180rpx;
			background: #F6F8F7;
			box-shadow: -2rpx -20rpx 21rpx -10rpx rgba(185, 201, 193, 1);
			border-radius: 28rpx 28rpx 0 0;
			position: relative;
			z-index: 2;

			.section {
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20rpx;
			}

			.section-menu {
				width: 100%;
				padding: 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-bottom: 16rpx;

				&.is-section-settle {
					display: block;
					padding-right: 56rpx;
					padding-bottom: 0;

					/deep/.uv-scroll-list__scroll-view__content {
						padding: 32rpx 0 6rpx 0;
					}

					.section-menu-item {
						flex-shrink: 0;
						padding-left: 56rpx;
						width: calc(100% / 4);
						box-sizing: border-box;
					}
				}

				&.section-menu-four {
					padding-right: 0;

					/deep/.uv-scroll-list__scroll-view__content {
						justify-content: space-around;
					}

					.section-menu-item {
						padding-left: 0;
					}
				}

				.section-menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.icon-image {
						height: 60rpx;
						width: 62rpx;
						position: relative;

						.icon {
							height: 100%;
							width: 100%;
						}

						.pending-order {
							position: absolute;
							left: 40rpx;
							top: -14rpx;
							// transform: translate(30%, -40%);
							min-width: 38rpx;
							height: 38rpx;
							z-index: 4;
							background: #FF4664;
							border: 4rpx solid #FFFFFF;
							font-size: 24rpx;
							font-weight: 900;
							color: #FFFFFF;
							display: flex;
							box-sizing: border-box;
							letter-spacing: 4rpx;
							padding: 4rpx 8rpx;
							border-radius: 40rpx;
							align-items: center;
							justify-content: center;
							text-align: center;
						}
					}

					.title {
						font-size: 24rpx;
						font-weight: 400;
						color: #1E1F1F;
						line-height: 33rpx;
						margin-top: 25rpx;
					}
				}
			}

			.section-settleState {
				background: none;
				justify-content: space-between;
				padding: 0;

				.section-menu-item {
					box-sizing: border-box;
					width: calc((100% - 28rpx)/3);
					height: 106rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					flex-direction: row;

					.icon-image {
						// height: 47rpx;

						.icon {
							height: 100%;
						}
					}

					.title {
						font-size: 28rpx;
						font-weight: 400;
						color: #1E1F1F;
						line-height: 37rpx;
						margin-left: 19rpx;
						margin-top: 0rpx;
					}
				}
			}

			.section-administration {
				margin-bottom: 16rpx;
				box-sizing: border-box;
				padding: 36rpx 36rpx 32rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 45rpx;
					margin-bottom: 16rpx;
				}

				.section-serve-list {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.section-serve-item {
						width: calc((100% - 24rpx) / 3);
						height: 118rpx;
						box-sizing: border-box;
						padding: 24rpx 0 0 28rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 37rpx;
						border-radius: 20rpx;

						&.auction {
							background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/auction.png');
							background-repeat: no-repeat;
							background-size: cover;
							color: #6D9E15;
						}

						&.service {
							background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/service-2.png');
							background-repeat: no-repeat;
							background-size: cover;
							color: #15359E;
						}

						&.order {
							background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/order.png');
							background-repeat: no-repeat;
							background-size: cover;
							color: #E3A90C;
						}
					}
				}
			}

			.section-serve {
				padding: 36rpx;

				button {
					padding: 0;
					margin: 0;
					background: none;
					line-height: 40rpx;
					text-align: start;
				}

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 45rpx;
					margin-bottom: -16rpx;
				}

				.section-serve-item {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 48rpx;

					.icon {
						height: 35rpx;
						width: 35rpx;
						margin-right: 16rpx;
					}

					.name {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 40rpx;
					}

					.arrow {
						color: #BBBCBB;
						font-size: 24rpx
					}
				}
			}
		}

		.enter-order {
			box-sizing: border-box;
			padding: 20rpx 24rpx;
			background: #FFFFFF;
			box-shadow: 1rpx 2rpx 6rpx 0px rgba(227, 233, 229, 1);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 48rpx);
			position: fixed;
			left: 24rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 148rpx);
			bottom: calc(env(safe-area-inset-bottom) + 148rpx);
			z-index: 5;

			.enter-icon {
				width: 79rpx;
				height: 79rpx;
				margin-right: 16rpx;
			}

			.enter-message {
				flex: 1;
			}

			.btn-enter {
				width: 144rpx;
				height: 58rpx;
				background: linear-gradient(144deg, #CCFA2F 0%, #ABF61A 55%, #A7F517 100%);
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: 900;
				color: #2B2F2B;
				line-height: 58rpx;
			}
		}
	}

	.guidance-pop {
		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: 10075;
		top: 0;
		left: 0;

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 100vw;
			background: rgba(0, 0, 0, .7);
			z-index: 998;
		}

		.overlay-none {
			background: rgba(0, 0, 0, 0);
		}

		.guidance-step-1 {
			position: absolute;
			z-index: 999;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.image-gui {
				height: 753rpx;
				width: 518rpx;
			}
		}

		.guidance-step-2,
		.guidance-step {
			width: 100%;
			position: absolute;
			z-index: 999;

			&::before {
				content: '';
				position: absolute;
				width: calc((100vw - 24rpx - 24rpx * 2 - 36rpx * 2) / 3 + 14rpx * 2);
				height: 146rpx;
				border-radius: 20rpx;
				left: 46rpx;
				top: calc(260rpx + 212rpx + 118rpx + 24rpx + 32rpx * 2 + 16rpx * 2 + 60rpx + 30rpx + 25rpx + 36rpx * 2 + 14rpx + 45rpx);
				box-shadow: 0 0 0 999vw rgba(0, 0, 0, .5);
			}

			.remind {
				position: absolute;
				left: 339rpx;
				top: calc(260rpx + 212rpx + 118rpx + 24rpx + 32rpx * 2 + 16rpx * 2 + 60rpx + 33rpx + 25rpx + 36rpx * 2 + 14rpx + 45rpx);
				width: 202rpx;
				height: 118rpx;
				box-sizing: border-box;
				padding: 53rpx 56rpx 28rpx 41rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance5.png");
				background-repeat: no-repeat;
				background-size: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 37rpx;
				text-align: center;
			}

			.Guidance {
				position: absolute;
				left: 46rpx;
				top: calc(260rpx + 212rpx + 118rpx + 24rpx + 32rpx * 2 + 16rpx + 45rpx);
				width: 505rpx;
				height: 193rpx;
				box-sizing: border-box;
				padding: 59rpx 33rpx 60rpx 51rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance4.png");
				background-repeat: no-repeat;
				background-size: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 37rpx;
				display: flex;
				align-items: center;

				&::after {
					position: absolute;
					display: block;
					right: 43rpx;
					top: -90rpx;
					content: '';
					width: 150rpx;
					height: 150rpx;
					background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png');
					background-repeat: no-repeat;
					background-size: cover;
					z-index: 10;
				}
			}
		}

		.guidance-step-3 {
			&::before {
				left: 260rpx;
			}

			.remind {
				left: 522rpx;
			}

			.Guidance {
				left: 226rpx;
			}
		}

		.guidance-step-4 {
			&::before {
				left: 474rpx;
			}

			.remind {
				padding: 53rpx 41rpx 28rpx 56rpx;
				left: 250rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance1.png");
			}

			.Guidance {
				left: 226rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance2.png");
			}
		}

		.guidance-step-5 {
			&::before {
				width: calc(100vw - 24rpx * 2);
				height: calc(60rpx + 33rpx + 25rpx + 32rpx * 2);
				top: calc(260rpx + 212rpx + 118rpx + 24rpx + 45rpx);
				left: 24rpx;
			}

			.remind {
				padding: 53rpx 41rpx 28rpx 56rpx;
				left: 250rpx;
				top: 262rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance1.png");
			}

			.Guidance {
				left: 226rpx;
				top: 402rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/guidance2.png");
			}
		}
	}
</style>